<script lang="ts" setup>
import type { AnalysisOverviewItem } from '@vben/common-ui';
import type { TabOption } from '@vben/types';

import { ref } from 'vue';

import { AnalysisChartsTabs } from '@vben/common-ui';
import {
  SvgBellIcon,
  SvgCakeIcon,
  SvgCardIcon,
  SvgDownloadIcon,
} from '@vben/icons';

import axios from 'axios';

import AnalyticsTrends from './analytics-trends.vue';
import AnalyticsVisits from './analytics-visits.vue';

const fmnum = ref(0);
const fwnum = ref(0);
const tempnum = ref(0);
const smnum = ref(0);
const loading = ref(true);

const overviewItems: AnalysisOverviewItem[] = [
  {
    icon: SvgCardIcon,
    title: '固件告警',
    totalTitle: '总用户量',
    totalValue: fmnum.value,
    value: fmnum.value,
  },
  {
    icon: SvgCakeIcon,
    title: '转发表告警',
    totalTitle: '总访问量',
    totalValue: fwnum.value,
    value: fwnum.value,
  },
  {
    icon: SvgDownloadIcon,
    title: '高温告警',
    totalTitle: '总下载量',
    totalValue: Number(tempnum.value),
    value: tempnum.value,
  },
  {
    icon: SvgBellIcon,
    title: '子网管理器告警',
    value: smnum.value,
  },
];

const chartTabs: TabOption[] = [
  {
    label: '流量监控',
    value: 'trends',
  },
  {
    label: '月告警数量',
    value: 'visits',
  },
];

async function getData() {
  let res = await axios.get('/v1api/fwcheck');
  fmnum.value = res.data.data.length;
  res = await axios.get('/remoteapi/v1/alert');
  fwnum.value = res.data.data.length;
  res = await axios.get('/v1api/ibdiagnet/temp_sensing');
  tempnum.value = res.data.data.filter(
    (e) => e.CurrentTemperature >= 60,
  ).length;
  res = await axios.get('/v1api/ibdiagnet/warnings_sm_info_retrieving');
  smnum.value = res.data.data.length;

  loading.value = false;
}

getData();
</script>

<template>
  <div class="p-5">
    <a-row :gutter="20">
      <a-col :span="6">
        <a-card>
          <a-statistic title="固件告警" :value="fmnum" />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic title="转发表告警" :value="fwnum" />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic title="温度告警" :value="tempnum" />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic title="子网管理器告警" :value="smnum" />
        </a-card>
      </a-col>
    </a-row>
    <!-- <AnalysisOverview v-if="!loading" :items="overviewItems" /> -->
    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
      <template #trends>
        <AnalyticsTrends />
      </template>
      <template #visits>
        <AnalyticsVisits />
      </template>
    </AnalysisChartsTabs>
  </div>
</template>
